<template>
	<view class="center">
		<!-- 顶部 -->
		<!-- <view class="header">
			<view class="arrow" @tap="$back()">
				<image class="lefts" style="width: 20rpx;height: 40rpx;" src="../../../static/images/arrow_left.png" mode="aspectFit"></image>
			</view>
			<view class="tit f36 cfff">员工定位</view>
			<view class="btn f32 cfff btn-plain-primary btn-radius">
				<image class="rights" src="../../../static/images/xianshi.png" mode="aspectFit"></image>
			</view>
		</view> -->
		<hea-ders title="职员定位">
			<image class="left" slot='left' src="@/static/images/arrow_left.png" mode="widthFix" @click="back"></image>
			<image class="left" slot='Rright' src="../../../static/images/xianshi.png" mode="widthFix" @click="back"></image>
		</hea-ders>
		<!-- 搜索框 -->
		<view class="seach">
			<view class="seach_one">
				<image src="../../../static/shopImage/tb_search.png" mode="aspectFit"></image>
				<input type="text" value="" placeholder="编码/名称" />
			</view>
			<view class="btn btn-plain-primary btn-radius">
				<image class="shaix" src="../../../static/images/731.png" mode="aspectFit" @click="showBottomV"></image>
			</view>
		</view>
		<!-- 弹框内容 -->
		<s-popup custom-class="bottom-popup" position="bottom" v-model="showBottomVisible" >
			<view class="zhiyuan" style="border-bottom: 1px solid #9E9E9E;" @tap="$open('../selection/selection')">
				<text>职员</text>
				<view class="xuanze">
					<!-- 跳转 -->
					<text>选择</text>
					<image src="../../../static/images/arrow_right.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="zhiyuan" @tap="$open('../Department/Department')">
				<text>职业部门</text>
				<view class="xuanze">
					<!-- 跳转 -->
					<text>选择</text>
					<image src="../../../static/images/arrow_right.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="butn">
				<button class="but1" type="default">重置条件</button>
				<button class="but2" type="default">确定</button>
			</view>
		</s-popup>
		<!-- 地图 -->
		<view class="page-body" style="height: 100vh;" v-if="!showBottomVisible">
			<view class="page-section page-section-gap" style="height:100%;">
				<map style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude" :markers="covers">
				</map>
			</view>
		</view>
		
		<image v-if="showBottomVisible" class="ditu" src="../../../static/images/ditu.png" mode=""></image>
	</view>
</template>

<script>
	import sPopup from '@/components/s-popup/index.vue';
	import heaDers from '@/pages/header/header.vue'
	export default {
		components: {
			sPopup,
			heaDers
		},
		data() {
			return {
				mapIsHidden: true,
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 40.013305,
				longitude: 118.685713,
				showBottomVisible: false,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../../static/location.png'
				}, {
					latitude: 39.90,
					longitude: 116.39,
					iconPath: '@/static/location.png'
				}]
			}
		},
		methods: {
			// change() {
			// 	this.falg = !falg
			// },
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			showBottomV(){
			this.showBottomVisible = !this.showBottomVisible
			this.showBottomVisible = this.showBottomVisible
			}
		},
	}
</script>
<style lang="scss" scoped>
	.center {
		height: 100%;

		.title {
			width: 100%;
			height: 88rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			background-color: rgba(36, 153, 246, 1);
			display: flex;
			justify-content: space-between;
			align-items: center;

			image {
				width: 22rpx;
			}

			text {
				font-size: 36rpx;
				color: #fff;
				font-weight: 400;
				font-family: PingFang SC;
			}

			.ima {
				image {
					width: 40rpx;
					margin-left: 5rpx;
				}
			}
		}

		.seach {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
		}

		.seach_one {
			display: flex;
			align-items: center;
			background: #F5F5F5;
			border-radius: 32rpx;
			width: 612rpx;
			padding: 10rpx;
		}

		.seach image {
			width: 32rpx;
			height: 32rpx;
			padding: 0 10rpx 10rpx 0;
			margin-left: 10rpx;
		}

		.shaix {
			width: 40rpx;
			height: 40rpx;
		}

		/* 弹窗内容 */
		.zhiyuan {
			display: flex;
			justify-content: space-between;
			padding: 10px 0 10px 10px;
			align-items: center;
		}

		.zhiyuan text {
			font-size: 28rpx;
		}

		.xuanze image {
			width: 26rpx;
			height: 26rpx;
		}

		.butn {
			display: flex;
			align-items: center;
		}

		.butn button {
			width: 50%;
			border: none;
			color: #fff;
			border-radius: 0;
			font-size: 28rpx;
			height: 88rpx;
			line-height: 88rpx;
		}

		.but1 {
			background: #FFA943;
		}

		.but2 {
			background: #2399F6;
		}

		.ditu {
			width: 100%;
			height: 100vh;
			opacity: 0.5;
		}
	}
</style>
